<template>
  <div class="flex flex-wrap gap-4 items-center">
    <el-form
      :model="form"
      label-width="auto"
      label-position="top"
      :inline="props.inline"
      :class="props.inline ? 'form-inline' : ''"
    >
      <el-form-item :label="props.showLabel ? '所有选择器' : ''">
        <el-select
          v-model="selectedSelectorId"
          placeholder="选择选择器"
          @change="onSelectorChange"
          class="selectedSelector-withicon"
        >
          <el-option
            v-for="item in allUserSelectors"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        &nbsp;&nbsp;
        <el-popover
          placement="left"
          title="选择器说明"
          :width="500"
          trigger="click"
        >
          <template #default>
            <el-input
              v-model="selectedSelectorDescription"
              autosize
              readonly
              type="textarea"
              placeholder="Please input"
            />
          </template>
          <template #reference>
            <el-button type="text">
              <el-icon>
                <InfoFilled />
              </el-icon>
            </el-button>
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item :label="props.showLabel ? '已选选项' : ''">
        <el-select
          v-model="selectedSelections"
          placeholder="选择选项"
          :multiple="props.multiple"
          @change="onSelectionChange"
        >
          <el-option
            v-for="item in selections"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="props.showLabel ? '已选用户' : ''"
        v-show="props.showUsers"
      >
        <el-select
          v-model="selectedUsers"
          placeholder="选择用户"
          :multiple="props.multiple"
          @change="onUserChange"
        >
          <el-option
            v-for="item in selectionUsers"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import { useWorkflowDesignStore } from "@/stores/workflowDesign";

const props = defineProps({
  userSelector: {
    default: () => {
      return {
        selectorId: "",
        selectorName: "",
        selections: [
          {
            id: "",
            name: "",
          },
        ],
      };
    },
  },
  users: {
    default: () => {
      return [
        {
          id: "",
          name: "",
        },
      ];
    },
  },
  index: {
    default: () => {
      return 0;
    },
  },
  multiple: {
    default: true,
  },
  inline: {
    default: false,
  },
  showUsers: {
    default: true,
  },
  showLabel: {
    default: true,
  },
});

const emit = defineEmits(["change"]);

const workflowDesignStore = useWorkflowDesignStore();

const allUserSelectors = ref([]);
const selections = ref([]);
const selectionUsers = ref([]);

const selectedSelectorId = ref("");
const selectedSelections = ref([]);
const selectedUsers = ref([]);

const selectedSelectorDescription = ref("");

const getAllUserSelectors = async () => {
  const res = await workflowDesignStore.getAllUserSelectors();
  allUserSelectors.value = res;
  selections.value = [];
};

const onSelectorChange = async () => {
  const res = await workflowDesignStore.getUserSelectionsOfUserSelector({
    userSelectorId: selectedSelectorId.value,
  });
  selections.value = res;
  selectedSelections.value = [];
  selectionUsers.value = [];

  const userSelector = allUserSelectors.value.find(
    (item) => item.id == selectedSelectorId.value
  );

  selectedSelectorDescription.value = userSelector && userSelector.description;
};

const onSelectionChange = async () => {
  if(!props.showUsers) {
    change();
    return;
  };
  const res = await workflowDesignStore.getUsersOfUserSelecton({
    userSelectorId: selectedSelectorId.value,
    selectionIds: props.multiple
      ? selectedSelections.value.join(",")
      : selectedSelections.value,
  });
  selectionUsers.value = res;
  if (selectionUsers.value.length == 1) {
    selectedUsers.value = props.multiple ? [res[0].id] : res[0].id;
  } else {
    selectedUsers.value = props.multiple ? [] : "";
  }
  change();
};

const onUserChange = () => {
  change();
};

const change = () => {
  const selector = {
    selectorId: selectedSelectorId.value,
    selectorName: allUserSelectors.value.find(
      (item) => item.id == selectedSelectorId.value
    ).name,
    selections: selections.value.filter((item) =>
      selectedSelections.value.includes(item.id)
    ),
  };
  const users = selectionUsers.value.filter((item) =>
    selectedUsers.value.includes(item.id)
  );

  emit("change", { selector, users, index: props.index });
};

watch(
  () => props.userSelector,
  async () => {
    if (selectedSelectorId.value == props.userSelector.selectorId) return;
    selectedSelectorId.value = props.userSelector.selectorId;
    setTimeout(async () => {
      await onSelectorChange();
      if (props.userSelector.selections) {
        selectedSelections.value = props.userSelector.selections.map((item) => {
          return item.id;
        });
      }
      if (props.users) {
        selectedUsers.value = props.users.map((item) => {
          return item.id;
        });
      }
    }, 200);
  },
  {
    immediate: true,
  }
);

nextTick(() => {
  getAllUserSelectors();
});
</script>
<style lang="less" scoped>
.form-inline {
  :deep(.el-form-item) {
    width: 25%;
  }
}
.selectedSelector-withicon {
  width: calc(100% - 30px);
}
</style>
